<template>
	<view class="container">
		<view class="shop-head">
			<view class="head-box">
				<navigator :url="'../search/search?mid='+model.id" class="search iconfont icon-search">搜索本店商品</navigator>
				<navigator open-type="switchTab" url="../account/index" class="menu iconfont icon-user"></navigator>
			</view>
			<view class="intro-box">
				<view class="left">
					<navigator :url="'about?id='+model.id" class="logo">
						<image mode="widthFix" :src="$api.loadFile(model.avatar)"></image>
					</navigator>
					<view class="info">
						<navigator :url="'about?id='+model.id" class="title">{{model.title}}</navigator>
						<text class="text">{{model.favoriteCount}}人关注</text>
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="addFavorite">
						<text class="icon iconfont icon-like-full"></text>
						<text class="text" v-if="!isFavorite">关注</text>
						<text class="text" v-else>已关注</text>
					</view>
				</view>
			</view>
			
		</view>
		<!--分类.开始-->
		<view class="sort-bar" :style="headStyle">
			<view class="item-box" :class="{'active':tabIndex==0}" @click="changeTabs(0)">商品</view>
			<view class="item-box" :class="{'active':tabIndex==1}" @click="changeTabs(1)">抢购</view>
			<view class="item-box" :class="{'active':tabIndex==2}" @click="changeTabs(2)">预售</view>
			<view class="item-box" :class="{'active':tabIndex==3}" @click="changeTabs(3)">换购</view>
		</view>
		<!--分类.结束-->
		<!--列表.开始-->
		<view class="group-box">
			<view class="goods-list" v-if="tabIndex==0">
				<!--循环.开始-->
				<navigator 
					v-for="(item,index) in listData" 
					:key="index" 
					:url="'../goods/show?id='+item.id"
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.imgUrl)"></image>
					</view>
					<view class="txt-box">
						<text class="title">{{item.title}}</text>
						<view class="price">
							<text class="sell">{{item.sellPrice}}</text>
							<text class="original">{{item.marketPrice}}</text>
						</view>
					</view>
				</navigator>
				<!--循环.结束-->
			</view>
			
			<view class="promo-list" v-if="tabIndex==1">
				<!--抢购.开始-->
				<navigator v-for="(item,index) in listData" 
					:key="index" 
					:url="'../goods/show?id='+item.goodsProduct.shopGoods.id+'&pid='+item.goodsProduct.id" 
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.goodsProduct.imgUrl?item.goodsProduct.imgUrl:item.goodsProduct.shopGoods.imgUrl)"></image>
					</view>
					<view class="info">
						<text class="title">{{item.title}}</text>
						<view class="time-box">
							<view class="time-box">
								<text>离活动结束</text>
								<uni-countdown
									:day="item.countDown.d" 
									:hour="item.countDown.h" 
									:minute="item.countDown.m" 
									:second="item.countDown.s">
								</uni-countdown>
							</view>
						</view>
						<view class="price-box">
							<text class="price">{{item.price}}</text>
							<text class="original">{{item.goodsProduct.sellPrice}}</text>
							<text class="label">抢购中</text>
						</view>
					</view>
				</navigator>
				<!--抢购.结束-->
			</view>
			
			<view class="promo-list" v-if="tabIndex==2">
				<!--预售.开始-->
				<navigator v-for="(item,index) in listData" 
					:key="index" 
					:url="'../goods/show?id='+item.goodsProduct.shopGoods.id+'&pid='+item.goodsProduct.id" 
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.goodsProduct.imgUrl?item.goodsProduct.imgUrl:item.goodsProduct.shopGoods.imgUrl)"></image>
					</view>
					<view class="info">
						<text class="title">{{item.title}}</text>
						<view class="time-box">
							<view class="time-box">
								<text>离活动结束</text>
								<uni-countdown
									:day="item.countDown.d" 
									:hour="item.countDown.h" 
									:minute="item.countDown.m" 
									:second="item.countDown.s">
								</uni-countdown>
							</view>
						</view>
						<view class="price-box">
							<text class="price">{{item.totalPrice}}</text>
							<text class="original">{{item.goodsProduct.sellPrice}}</text>
							<text class="label">预售中</text>
						</view>
					</view>
				</navigator>
				<!--预售.结束-->
			</view>
			
			<view class="goods-list" v-if="tabIndex==3">
				<!--换购.开始-->
				<navigator 
					v-for="(item,index) in listData" 
					:key="index" 
					:url="'../convert/show?id='+item.id"
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.goodsProduct.imgUrl?item.goodsProduct.imgUrl:item.goodsProduct.shopGoods.imgUrl)"></image>
					</view>
					<view class="txt-box">
						<text class="title">{{item.title}}</text>
						<view class="point">
							<text class="sell">{{item.point}}</text>
							<text class="original">{{item.goodsProduct.sellPrice}}</text>
						</view>
					</view>
				</navigator>
				<!--换购.结束-->
			</view>
			
			<uni-load-more :status="loadingType" @clickLoadMore="loadData('add')"></uni-load-more>
		</view>
		<!--列表.结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headStyle: '',
				tabIndex: 0, //当前索引页
				isFavorite: false, //店铺收藏
				model: {}, //店铺信息
				loadingType: "more", //加载状态
				totalCount: 0, //总数量
				totalPages: 0, //总页数
				pageSize: 10, //每页显示条数
				pageIndex: 1, //当前页码
				listData: [], //数据列表
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				let _this = this;
				//加载店铺信息
				await _this.$api.request({
					url: `/client/merchant/${id}`,
				}).then(res=>{
					_this.model = res.data;
				});
				//加载店铺收藏信息
				await _this.$api.request({
					url: `/account/merchant/favorite/${_this.model.id}`,
				}).then(res=>{
					_this.isFavorite = true;
				}).catch(err=>{});
				//加载列表信息
				_this.loadData('add');
			},
			//初始化数据,带下滑刷新和上滑加载
			async loadData(type='add', loading){
				let _this = this;
				//上滑加载更多
				if(type === 'add'){
					if(_this.loadingType === 'nomore'){
						return;
					}
					_this.loadingType = 'loading';
				}
				//下滑刷新
				else{
					_this.pageIndex=1;
					_this.listData=[];
					_this.loadingType="more";
				}
				//加载地址列表
				let sendUrl = `/client/shop/goods?merchantId=${_this.model.id}&pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				//抢购
				if(_this.tabIndex==1){
					sendUrl = `/client/shop/speed?merchantId=${_this.model.id}&pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				}
				//预售
				else if(_this.tabIndex==2){
					sendUrl = `/client/shop/presell?merchantId=${_this.model.id}&pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				}
				//换购
				else if(_this.tabIndex==3){
					sendUrl = `/client/shop/convert?merchantId=${_this.model.id}&pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`
				}
				//请求API数据
				await _this.$api.request({
					url: sendUrl,
					loading: true
				}).then(res=>{
					let pageInfo = JSON.parse(res.header["x-pagination"]);
					_this.totalCount = pageInfo.totalCount;
					_this.totalPages = pageInfo.totalPages;
					let listData = res.data;
					//抢购
					if(_this.tabIndex==1){
						listData.forEach(item=>{
							item.countDown = _this.timeCount(item.endTime);
						});
					}
					//预售
					if(_this.tabIndex==2){
						listData.forEach(item=>{
							item.countDown = _this.timeCount(item.actEndTime);
						});
					}
					_this.listData = _this.listData.concat(listData);
				}).catch((err)=>{
					_this.loadingType="nomore";
					uni.stopPullDownRefresh();
				});
				
				//判断是否还有下一页
				if(_this.pageIndex >= _this.totalPages){
					_this.loadingType="nomore";
				}else{
					_this.pageIndex++;
					_this.loadingType="more";
				}
				//下滑隐藏动画及上滑事件
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//添加/取消店铺收藏
			addFavorite() {
				let _this = this;
				if(!_this.isFavorite) {
					_this.$api.request({
						url: `/account/merchant/favorite/${_this.model.id}`,
						method: 'post',
					}).then(res=>{
						_this.isFavorite = true;
					});
				}else{
					_this.$api.request({
						url: `/account/merchant/favorite/${_this.model.id}`,
						method: 'delete',
					}).then(res=>{
						_this.isFavorite = false;
					});
				}
			},
			//点击切换加载数据
			changeTabs(val) {
				let _this = this;
				_this.tabIndex = val;
				_this.loadData('refresh');
			},
			//计算剩余时间
			timeCount(endTime){
				let date = new Date();
				let now = date.getTime();//获得当前时间与1970年1月1日时间相差的毫秒数
				let endDate = new Date(endTime.replace(/-/g, '/')); 
				let end = endDate.getTime();//结束时间与1970年1月1日时间相差的毫秒数
				let leftTime = end-now;//计算两日期之间相差的毫秒数
				let countDown = {};
				if (leftTime >= 0) {
					countDown.d = Math.floor(leftTime/1000/60/60/24);
					countDown.h = Math.floor(leftTime/1000/60/60%24);  
					countDown.m = Math.floor(leftTime/1000/60%60);  
					countDown.s = Math.floor(leftTime/1000%60);
				}
				//console.log(countDown)
				return countDown;
			},
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		},
		//下滑刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//上滑加载更多
		onReachBottom(){
			this.loadData('add');
		},
		onPageScroll(e) {
			//滚动条改变头部透明度
			if(e.scrollTop<100){
				let alphaNum=e.scrollTop/100;
				this.headStyle="background:rgba(200,37,25,"+alphaNum+");"
			}
			else if(e.scrollTop>100){
				this.headStyle="background:rgba(200,37,25,0.8);box-shadow:0 0 2px rgba(243,243,243,0.8);";
			}
		},
	}
</script>

<style lang="scss">
	.shop-head{
		display: block;
		position: relative;
		padding-bottom: 48px;
		width: 100%;
		&:before{
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #c82519;
		}
		.head-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 100%;
			height: 48px;
			line-height: 48px;
			color: #f2f2f2;
			background: rgba($color: #fff, $alpha: 0);
			box-shadow: 0 0 3px rgba($color: #f3f3f3, $alpha: 0);
			.search {
				flex-grow: 1;
				margin-left: 24rpx;
				padding: 5px 0;
				height: 22px;
				line-height: 22px;
				border-radius: 20px;
				color: #a2a2a2;
				font-size: 14px;
				background: rgba(243, 243, 243,.9);
				&::before{
					margin-left: 20px;
					margin-right: 5px;
				}
			}
			.menu {
				padding: 0 24rpx;
				font-size: 18px;
			}
		}
		.intro-box{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 12rpx 24rpx;
			padding: 0;
			border-radius: 16rpx;
			overflow: hidden;
			.left{
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow: hidden;
				.logo{
					flex-shrink: 0;
					margin-right: 24rpx;
					width: 98rpx;
					height: 98rpx;
					border: 2rpx solid #ebebeb;
					background: #fff;
					border-radius: 20rpx;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.info{
					position: relative;
					overflow: hidden;
					.title{
						position: relative;
						display: block;
						width: 100%;
						color: #f5f5f5;
						font-size: 30rpx;
						font-weight: 600;
						line-height: 56rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						&:after{
							color: #eee;
							font-size: 24rpx !important;
							font-weight: normal;
							font-family: "iconfont";
							content: "\e68d";
							position: absolute;
							top: 50%;
							right: 0;
							margin-top: -12rpx;
							width: 24rpx;
							height: 24rpx;
							line-height: 24rpx;
						}
					}
					.text{
						display: block;
						width: 100%;
						color: #fff;
						font-size: 20rpx;
						line-height: 42rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
			.right{
				flex-shrink: 0;
				margin-left: 40rpx;
				.btn{
					padding: 0 20rpx;
					color: #fff;
					background: #f00000;
					height: 48rpx;
					border-radius: 24rpx;
					box-shadow: 0 0 4rpx rgba($color: #000, $alpha: 0.2);
					overflow: hidden;
					.icon{
						margin-right: 10rpx;
						font-size: 22rpx;
						line-height: 48rpx;
					}
					.text{
						font-size: 22rpx;
						line-height: 48rpx;
					}
				}
			}
		}
	}
	.sort-bar{
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		height: 48px;
		margin-top: -48px;
		z-index: 1;
		.item-box{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
			position: relative;
			color: #eee;
			font-size: 28rpx;
			font-weight: 600;
			&.active{
				color: #fff;
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					right: 0;
					bottom: 4rpx;
					transform: translateX(-50%);
					height: 6rpx;
					border-radius: 6rpx;
					background: #fff;
				}
			}
		}
	}
</style>
